#@adminLayout()
#define main()
<div class="jbolt_page" data-key="#(pmkey)">
<div class="jbolt_page_title">
	<h1>JBoltTable组件 - Demo</h1>
</div>
<div class="jbolt_page_content">
<div class="alert alert-danger" role="alert">
请根据实际是否开启了多选项卡模式点击不同按钮案例
</div>
#setLocal(JboltWithTabs=CACHE.getUserJBoltAdminWithTabs(session[SessionKey.ADMIN_USER_ID]))
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">本地渲染-普通表格</div>
<div class="card-body">
#if(JboltWithTabs) 
<a  class="btn btn-info mr-3" data-title="单实例"   data-tabtrigger data-key="jbolttable_normal_tabtrigger_single" href="demo/jbolttable/normal">单实例</a>
<a  class="btn btn-info mr-3" data-title="多实例"   data-tabtrigger data-key="jbolttable_normal_tabtrigger_multi" href="demo/jbolttable/normalMulti">多实例</a>
<a  class="btn btn-info mr-3" data-title="复杂表头"   data-tabtrigger data-key="jbolttable_normal_tabtrigger_thead" href="demo/jbolttable/normalThead">复杂表头</a>
<a  class="btn btn-info mr-3" data-title="带工具栏"   data-tabtrigger data-key="jbolttable_normal_tabtrigger_toolbar" href="demo/jbolttable/normalToolbar">带工具栏</a>
#else
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/normal">单实例</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/normalMulti">多实例</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/normalThead">复杂表头</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/normalToolbar">带工具栏</a>
#end
<a class="btn btn-dark mr-3" data-dialogbtn data-area="80%,80%"  data-btn="no"  data-title="Dialog中的JBoltTableDemo" href="demo/jbolttable/normalInDialog">在Dialog中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-resize="true" data-width="800" href="demo/jbolttable/normalInJBoltLayer">JBoltLayer中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-width="800"  data-resize="true" data-dir="left" data-height="80%" href="demo/jbolttable/normalInJBoltLayer">JBoltLayer-80%高度</a>
<a class="btn btn-secondary" data-jboltlayertrigger data-width="70%" data-resize="true" href="demo/jbolttable/normalMultiInJBoltLayer">JBoltLayer中多实例</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<div class="card">
<div class="card-header">本地渲染-表格带分页</div>
<div class="card-body">
#if(JboltWithTabs) 
<a  class="btn btn-info mr-3" data-title="单实例"   data-tabtrigger data-key="jbolttable_paginate_tabtrigger_single" href="demo/jbolttable/paginate">单实例</a>
<a  class="btn btn-info mr-3" data-title="多实例"   data-tabtrigger data-key="jbolttable_paginate_tabtrigger_multi" href="demo/jbolttable/paginateMulti">多实例</a>
#else
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/paginate">单实例</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/paginateMulti">多实例</a>
#end
<a class="btn btn-dark mr-3" data-dialogbtn data-area="80%,80%"  data-btn="no"  data-title="Dialog中的JBoltTableDemo" href="demo/jbolttable/paginateInDialog">在Dialog中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-resize="true" data-width="70%" href="demo/jbolttable/paginateInJBoltLayer">JBoltLayer中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-width="800"  data-resize="true" data-dir="left" data-height="80%" href="demo/jbolttable/paginateInJBoltLayer">JBoltLayer-80%高度</a>
<a class="btn btn-secondary" data-jboltlayertrigger data-width="70%" data-resize="true" href="demo/jbolttable/paginateMultiInJBoltLayer">JBoltLayer中多实例</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<div class="card">
<div class="card-header">AJAX异步JSON渲染-无分页</div>
<div class="card-body">
#if(JboltWithTabs) 
<a  class="btn btn-info mr-3" data-title="单实例"   data-tabtrigger data-key="jbolttable_ajaxnopage_tabtrigger_single" href="demo/jbolttable/ajaxNoPage">单实例</a>
<a  class="btn btn-info mr-3" data-title="多实例"   data-tabtrigger data-key="jbolttable_ajaxnopage_tabtrigger_multi" href="demo/jbolttable/ajaxNoPageMulti">多实例</a>
<a  class="btn btn-info mr-3" data-title="JBoltTable复杂表头"  data-tabtrigger data-key="jbolttable_ajaxnopage_tabtrigger_thead" href="demo/jbolttable/ajaxNoPageThead">复杂表头</a>
#else
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/ajaxNoPage">单实例</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/ajaxNoPageMulti">多实例</a>
<a  class="btn btn-primary mr-3" data-title="JBoltTable复杂表头"  data-tabtrigger data-key="jbolttable_ajaxnopage_tabtrigger_thead" href="demo/jbolttable/ajaxNoPageThead">复杂表头</a>
#end
<a class="btn btn-dark mr-3" data-dialogbtn data-area="80%,80%" data-btn="no" data-title="Dialog中的JBoltTableDemo" href="demo/jbolttable/ajaxNoPageInDialog">在Dialog中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-resize="true" data-width="70%" href="demo/jbolttable/ajaxNoPageInJBoltLayer">JBoltLayer中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-width="800"  data-resize="true" data-dir="left" data-height="80%" href="demo/jbolttable/ajaxNoPageInJBoltLayer">JBoltLayer-80%高度</a>
<a class="btn btn-secondary" data-jboltlayertrigger data-width="70%" data-resize="true" href="demo/jbolttable/ajaxNoPageMultiInJBoltLayer">JBoltLayer中多实例</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<div class="card">
<div class="card-header">AJAX异步JSON渲染-带分页</div>
<div class="card-body">
#if(JboltWithTabs) 
<a  class="btn btn-info mr-3" data-title="单实例"   data-tabtrigger data-key="jbolttable_ajax_tabtrigger_single" href="demo/jbolttable/ajax">单实例</a>
<a  class="btn btn-info mr-3" data-title="多实例"   data-tabtrigger data-key="jbolttable_ajax_tabtrigger_multi" href="demo/jbolttable/ajaxMulti">多实例</a>
<a  class="btn btn-info mr-3" data-title="ajax复杂表头带分页"   data-tabtrigger data-key="jbolttable_ajax_tabtrigger_single" href="demo/jbolttable/ajaxThead">复杂表头</a>
<a  class="btn btn-info mr-3" data-title="带工具条"   data-tabtrigger data-key="jbolttable_ajax_tabtrigger_toolbar" href="demo/jbolttable/ajaxToolbar">带工具条</a>
#else
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/ajax">单实例</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/ajaxMulti">多实例</a>
<a  class="btn btn-primary mr-3" data-title="ajax复杂表头带分页"   data-tabtrigger data-key="jbolttable_ajax_tabtrigger_single" href="demo/jbolttable/ajaxThead">复杂表头</a>
<a  class="btn btn-primary mr-3" data-pjax href="demo/jbolttable/ajaxToolbar">带工具条</a>
#end
<a class="btn btn-dark mr-3" data-dialogbtn data-area="80%,80%" data-btn="no" data-title="Dialog中的JBoltTableDemo" href="demo/jbolttable/ajaxInDialog">在Dialog中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-resize="true" data-width="70%" href="demo/jbolttable/ajaxInJBoltLayer">JBoltLayer中</a>
<a class="btn btn-danger mr-3" data-jboltlayertrigger data-width="800"  data-resize="true" data-dir="left" data-height="80%" href="demo/jbolttable/ajaxInJBoltLayer">JBoltLayer-80%高度</a>
<a class="btn btn-secondary" data-jboltlayertrigger data-width="70%" data-resize="true" href="demo/jbolttable/ajaxMultiInJBoltLayer">JBoltLayer中多实例</a>
</div>
</div>
</div>
</div>


</div>
</div>
#end

#define js()
<script>

$(function(){
})
</script>
#end
